<template>
    <div>
        <TabBar>
            <TabBarItem path="/index">
                <template v-slot:item-icon>
                    <!--        使用别名，在webpack.base.conf.js中的resolve设置的
                        前面要用~,而import里是不用的-->
                    <img src="~assets/img/tabbar/home.png" >
                </template>
                <template v-slot:item-icon-active>
                    <img  src="~assets/img/tabbar/home1.png">
                </template>
                <template v-slot:item-text>
                    <div>首页</div>
                </template>


            </TabBarItem>

            <TabBarItem path="/podcast">
                <template v-slot:item-icon>
                    <img src="~assets/img/tabbar/faxiang1.svg">
                </template>
                <template v-slot:item-icon-active>
                    <img  src="~assets/img/tabbar/faxiang.svg">
                </template>
                <template v-slot:item-text>
                    <div>发现</div>
                </template>
            </TabBarItem>

            <TabBarItem path="/profile">
                <template v-slot:item-icon>
                    <img src="~assets/img/tabbar/mine.png">
                </template>
                <template v-slot:item-icon-active>
                    <img  src="~assets/img/tabbar/mine1.png">
                </template>
                <template v-slot:item-text>
                    <div>我的</div>
                </template>
            </TabBarItem>

        </TabBar>


        <router-view v-slot="{ Component }">
            <keep-alive include="index,podcast,profile">
                <component class="views" :is="Component"></component>
            </keep-alive>
        </router-view>

    </div>
</template>

<script>
    import TabBarItem from "@/components/common/tabbar/TabBarItem";
    import TabBar from "@/components/common/tabbar/TabBar";
    export default {
        name: "MainTabbar",
        components:{
            TabBar,
            TabBarItem
        }
    }
</script>

<style scoped>

</style>